<template>
	<view>
		<view class="top_box" :style="{'paddingTop':SystemTop}">
			<view class="top">
				<u-image width="40" height="40" :src="back" @click="goBack"></u-image>
				<view class="line"></view>
				<u-image width="40" height="40" :src="home" @click="goIndex"></u-image>
			</view>
			<view class="top_title">
				{{title}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			isBack: {
				default: true,
				required: false,
				type: Boolean
			},
			urlBack: {
				default: '',
				required: false
			},
			title: {
				default: '',
				required: true
			},
		},
		data() {
			return {
				height: '10px',
				SystemTop: '10px',
				home: require('@/static/icon/nav_back _ home@2x.png'),
				back: require('@/static/icon/nav_back _ parent@2x.png'),
			}
		},
		onReady() {
			this.Iswechat()
		},
		methods: {
			Iswechat() {
				// 获取微信胶囊的位置信息 width,height,top,right,left,bottom
			},
			goBack() {
				if (!this.isBack) return
				//console.log(this.urlBack.length);
				if (this.urlBack && this.urlBack.length !== undefined) {
					if (this.urlBack.includes('/pages/index/my')) {
						uni.switchTab({
							url: '/pages/index/my'
						})
					}
					uni.redirectTo({
						url: this.urlBack
					});
				} else {
					//console.log(123);
					uni.navigateBack({
						delta: 1
					});
				}
			},
			goIndex() {
				if (!this.isBack) return
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	@media (min-width:500px) {
		.top_box {
			padding-left: 20rpx;
			//top: 100rpx;
			//padding-top: 100rpx;
			padding-bottom: 16rpx;
			display: flex;
			align-items: center;
			background-color: white;
			flex-wrap: nowrap;
			position: fixed;
			z-index: 971;
			background-color: #fff;
			width: 375px;
			text-align: center;

			//margin-top: 0 auto;
			//top: 200;
			.top {
				background: white;
				display: flex;
				border-radius: 50rpx;
				border: 1px solid rgba(151, 151, 151, 0.2);
				padding: 8rpx 20rpx;
				width: 170rpx;

				.line {
					width: 1px;
					height: 19px;
					margin: 0 20rpx;
					background: rgba(0, 0, 0, 0.2);
				}
			}

			.top_title {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #000000;
				line-height: 38rpx;
				text-align: center;
				width: 100%;
				margin-right: 170rpx;
			}
		}
	}

	@media (max-width:499px) {
		.top_box {
			padding-left: 20rpx;
			//top: 100rpx;
			//padding-top: 100rpx;
			padding-bottom: 16rpx;
			display: flex;
			align-items: center;
			background-color: white;
			flex-wrap: nowrap;
			position: fixed;
			z-index: 971;
			background-color: #fff;
			width: 100%;
			text-align: center;

			//margin-top: 0 auto;
			//top: 200;
			.top {
				background: white;
				display: flex;
				border-radius: 50rpx;
				border: 1px solid rgba(151, 151, 151, 0.2);
				padding: 8rpx 20rpx;
				width: 170rpx;

				.line {
					width: 1px;
					height: 19px;
					margin: 0 20rpx;
					background: rgba(0, 0, 0, 0.2);
				}
			}

			.top_title {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #000000;
				line-height: 38rpx;
				text-align: center;
				width: 100%;
				margin-right: 170rpx;
			}
		}
	}
</style>